<template>
  <div class="settings-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>系统设置</h2>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <!-- 界面设置 -->
        <el-tab-pane label="界面设置" name="interface">
          <el-form label-width="120px">
            <el-form-item label="主题模式">
              <el-radio-group v-model="settings.theme">
                <el-radio label="light">浅色模式</el-radio>
                <el-radio label="dark">深色模式</el-radio>
                <el-radio label="auto">跟随系统</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="主题颜色">
              <el-color-picker v-model="settings.primaryColor" />
            </el-form-item>

            <el-form-item label="字体大小">
              <el-slider v-model="settings.fontSize" :min="12" :max="20" :step="1" show-input />
            </el-form-item>

            <el-form-item label="菜单默认展开">
              <el-switch v-model="settings.expandMenu" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notifications">
          <el-form label-width="120px">
            <el-form-item label="系统通知">
              <el-switch v-model="settings.systemNotifications" />
            </el-form-item>

            <el-form-item label="任务提醒">
              <el-switch v-model="settings.taskReminders" />
            </el-form-item>

            <el-form-item label="备课提醒">
              <el-switch v-model="settings.classPreparationReminders" />
            </el-form-item>

            <el-form-item label="电子邮件通知">
              <el-switch v-model="settings.emailNotifications" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 隐私设置 -->
        <el-tab-pane label="隐私设置" name="privacy">
          <el-form label-width="120px">
            <el-form-item label="资源共享">
              <el-radio-group v-model="settings.resourceSharing">
                <el-radio label="public">所有人可见</el-radio>
                <el-radio label="school">仅限学校</el-radio>
                <el-radio label="private">仅自己可见</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="个人信息可见">
              <el-switch v-model="settings.profileVisible" />
            </el-form-item>

            <el-form-item label="活动记录">
              <el-switch v-model="settings.activityTracking" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div class="actions">
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
        <el-button @click="resetSettings">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 激活的标签页
const activeTab = ref('interface')

// 设置对象
const settings = reactive({
  // 界面设置
  theme: 'light',
  primaryColor: '#409EFF',
  fontSize: 14,
  expandMenu: true,

  // 通知设置
  systemNotifications: true,
  taskReminders: true,
  classPreparationReminders: true,
  emailNotifications: false,

  // 隐私设置
  resourceSharing: 'school',
  profileVisible: true,
  activityTracking: true,
})

// 默认设置，用于重置
const defaultSettings = { ...settings }

// 加载设置
onMounted(() => {
  const savedSettings = localStorage.getItem('userSettings')
  if (savedSettings) {
    try {
      const parsedSettings = JSON.parse(savedSettings)
      Object.assign(settings, parsedSettings)
    } catch (error) {
      console.error('加载设置失败:', error)
    }
  }
})

// 保存设置
const saveSettings = () => {
  try {
    localStorage.setItem('userSettings', JSON.stringify(settings))
    ElMessage.success('设置已保存')
  } catch (error) {
    console.error('保存设置失败:', error)
    ElMessage.error('保存设置失败')
  }
}

// 重置设置
const resetSettings = () => {
  Object.assign(settings, defaultSettings)
  ElMessage.info('设置已重置')
}
</script>

<style scoped>
.settings-container {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.actions {
  margin-top: 20px;
  text-align: right;
}
</style>
